<!DOCTYPE html>
<html lang="zh">
<head>
	<th:block th:include="include :: header('文件上传')" />
	<th:block th:include="include :: bootstrap-fileinput-css" />
	<style>
		.layui-laypage a, .layui-laypage span {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    vertical-align: middle;
    padding: 0 15px;
    height: 28px;
    line-height: 28px;
    margin: 0 -1px 5px 0;
    background-color: #fff;
    font-size: 12px;
}
.layui-laypage a, .layui-laypage button, .layui-laypage input, .layui-laypage select, .layui-laypage span {
    border: 1px solid #e2e2e2;
}
#danger,#success{
    position: fixed;
    left: 35%;
    top: 0;
    width: 250px;
    text-align: center;
    font-size: 16px;
    line-height: 16px;
}
.states0{
	color:#18a689
}
.states1{
	color:red
}
#msg{
text-align:center;
}
	</style>
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
        <div class="col-sm-12 search-collapse">
				<form id="time-form">
					<div class="select-list">
						<ul>
							<li>
								<a class="btn btn-primary btn-sm" href="javascript:avatar()">选择文件上传</a>
							</li>
						</ul>
					</div>
				</form>
			</div>
        	<div style="min-height: 300px;" class="col-sm-12 select-table table-striped">
        		<div id="rowList" class="row"></div>
				<div id="demo"></div>
				<div id="msg">暂无文件</div>
			</div>            
        </div>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: bootstrap-fileinput-js" />
    <script type="text/javascript">
    var prefix = ctx + "tool/file";

    $(function() {
    	
					
		num = $.ajax({
			type:"post",
			url: prefix + "/getFileList",
			async:false,								
		}).responseJSON.data	
		if (num.length==0) {
			$('#msg').removeClass('hide')
		}else {
			$('#msg').addClass('hide')
		}
		if (num.length<=8) {
			$('#demo').addClass('hide')
		}else {
			$('#demo').removeClass('hide')
		}
		layui.use(['laypage', 'layer'], function(){
  		  var laypage = layui.laypage
  		  ,layer = layui.layer;
  		  laypage.render({
  			    elem: 'demo'
  			    ,count: num.length
  			    ,limit: 8
  			    ,limits: [100, 300, 500],
  			  jump: function(obj){
  				document.getElementById('rowList').innerHTML = function(){
  			        var arr = []
  			        ,thisData = num.concat().splice(obj.curr*obj.limit - obj.limit, obj.limit);
  			        layui.each(thisData, function(index, item){
  			        	item.id=JSON.stringify(item.id)
  			        	if (item.filetype==0) {
  			        		arr.push('<div class="col-sm-3"><div class="ibox"><div class="ibox-content" style="padding: 5px 20px 5px 20px;"><img style="width: 185px;height: 200px;" src="/profile/avatar/'+item.route+'" /><p style="text-align: center;">'+item.fileName+'</p><div class="row  m-t-sm"><div class="col-sm-6"><button type="button" onclick="remove(\''+item.id+'\')" class="btn btn-sm btn-danger">删除</button></div> <div class="col-sm-6 text-right"><button type="button" class="btn btn-sm btn-default" onclick="openImg(\''+item.route+'\')">预览</button></div></div></div></div></div>');
  			        	}else {
  			        		//<button type="button" class="btn btn-sm btn-default" onclick="openFile(\''+item.route+'\')">预览</button>
  			        		arr.push('<div class="col-sm-3"><div class="ibox"><div class="ibox-content" style="padding: 5px 20px 5px 20px;"><img style="width: 185px;height: 200px;" src="/img/wenjian.png" /><p style="text-align: center;">'+item.fileName+'</p><div class="row  m-t-sm"><div class="col-sm-6"><button type="button" onclick="remove(\''+item.id+'\')" class="btn btn-sm btn-danger">删除</button></div> <div class="col-sm-6 text-right"></div></div></div></div></div>');
  			        		
  			        	}
  			        	
  			          
  			        });
  			        return arr.join('');
  			      }();
  			  }
  			  });
  	});
        
    });
    function openImg(url){
    	window.open(prefix + '/openImg?url='+url);
    };
    function openFile(url){
    	
    }
    
    function avatar() {
        var url = prefix + '/avatar';
        $.modal.openFull("文件上传", url);
    }
    function remove(id){
    	$.modal.confirm("确认要删除选中的数据吗?", function() {    			
    		var postData = {
                    ids: id
                }
        	$.ajax({
				type:"post",
				url: prefix + "/deleteFile",
				async:true,
				data: postData,
				success: function (data){
					if(data.code==0){						
						window.location.reload();
					}else{
						$.modal.msg(data.msg,"error");
					}					
				}
			})
		});
    }
    </script>
</body>
</html>
